<template>
  <div>
    <a-drawer
      :title="$t('all.autotext751')"
      :visible="visible"
      :footer="null"
      width="1000"
      @close="handleCancel"
    >
      <div class="record-wrap">
        <a-button class="export" v-if="current == 2" @click="exportTap">{{ $t('all.autotext1014') }}</a-button>
        <a-tabs v-model="current" @change="tabChange">
          <a-tab-pane key="1" :tab="$t('all.autotext1405')">
            <s-table
              :columns="recordColumns"
              :data="loadrecordData"
              :row-key="record => record.id"
              ref="recordTableRef"
            >
              <template slot="createTime" slot-scope="text, record">
                {{ record.createTime | moment('YYYY-MM-DD HH:mm') }}
              </template>
            </s-table>
          </a-tab-pane>
          <a-tab-pane key="2" :tab="$t('all.autotext333')">
            <s-table
              :columns="groupColumns"
              :data="loadgroupData"
              :row-key="record => record.id"
              ref="groupTableRef"
            >
              <template slot="deleted" slot-scope="text, record">
                {{ record.deleted == 1 ? `${record.createTime} - ${record.modityTime }` : `${record.createTime} - ${$t('all.autotext535')}` }}
              </template>
              <template slot="action" slot-scope="text, record">
                <a @click="clickLook(record)">{{ $t('all.autotext568') }}</a>
              </template>
            </s-table>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-drawer>
    <historyDrawer ref="historyRef"></historyDrawer>
  </div>
</template>

<script>
import moment from 'moment'
import { exportExcel } from '@/utils/util'
import historyDrawer from './historyDrawer.vue'
import { modityRecode, allTeam, activityExport } from '@/api/overview/member'
export default {
  components: {
    historyDrawer
  },
  data () {
    return {
      proId: '',
      visible: false,
      current: '1',
      recordColumns: [
        {
          title: this.$t('all.autotext698'),
          key: 'createTime',
          scopedSlots: { customRender: 'createTime' }
        },
        {
          title: this.$t('all.autotext840'),
          key: 'account',
          dataIndex: 'account'
        },
        {
          title: this.$t('all.autotext16'),
          key: 'content',
          width: 500,
          dataIndex: 'content'
        }
      ],
      groupColumns: [
        {
          title: this.$t('all.autotext551'),
          key: 'account',
          dataIndex: 'account'
        },
        {
          title: this.$t('all.autotext977'),
          key: 'name',
          dataIndex: 'name'
        },
        {
          title: this.$t('all.autotext709'),
          key: 'phone',
          dataIndex: 'phone'
        },
        {
          title: this.$t('all.autotext44'),
          key: 'email',
          dataIndex: 'email'
        },
        {
          title: this.$t('all.autotext959'),
          key: 'deleted',
          scopedSlots: { customRender: 'deleted' }
        },
        {
          title: this.$t('all.autotext261'),
          key: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      loadrecordData: parameter => {
        return modityRecode(Object.assign(parameter, { proId: this.proId }))
      },
      loadgroupData: parameter => {
        return allTeam(Object.assign(parameter, { proId: this.proId }))
          .then(res => {
            const pageObj = {
              pageSize: res.pageSize,
              pageNumber: res.pageNumber,
              totalCount: res.totalCount,
              // totalPage: 0,
              content: res.content.map(item => {
                return {
                  ...item,
                  createTime: moment(item.createTime).format('YYYY-MM-DD HH:mm'),
                  modityTime: moment(item.modityTime).format('YYYY-MM-DD HH:mm')
                }
              })
            }
            return pageObj
          })
      }
    }
  },
  created () {
    const pd = localStorage.getItem('CURRENT_PROID')
    if (pd) {
      this.proId = parseInt(pd)
    }
  },
  methods: {
    open () {
      this.visible = true
    },
    getFeatch () {
      this.$nextTick(() => {
        if (this.current === '1') {
          this.$refs.recordTableRef.refresh(true)
        } else {
          this.$refs.groupTableRef.refresh(true)
        }
      })
    },
    tabChange () {
      this.getFeatch()
    },
    handleCancel () {
      this.visible = false
    },
    clickLook (record) {
      this.$refs.historyRef.open()
      this.$refs.historyRef.getDetail(record.id)
    },
    async exportTap () {
      const res = await activityExport({ proId: this.proId })
      this.$message.success(this.$t('all.autotext556'))
      exportExcel(this.$t('all.autotext640'), res)
    }
  }
}
</script>

<style lang="less" scoped>
.record-wrap {
  position:relative;
}
.export {
  position: absolute;
  right: 0;
  z-index: 10;
}
</style>
